<!--
 * @Author: LiZhiWei
 * @Date: 2025-07-14 11:45:50
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-29 14:42:13
 * @Description: 
-->
<template>
  <Scaffold
    :entity="entity"
    :actions="actions"
    :show-create="false"
    :show-trashed="false"
    :multi-select="false"
  >
    <template #column_executed_time="{ row }">
      <span v-if="row.response_code === 200" class="color-success">
        {{ parseInt(row.executed_time) }} ms
      </span>
      <span v-else-if="row.response_code === 500" class="color-danger">
        {{ parseInt(row.executed_time) }} ms
      </span>
      <span v-else class="color-warning">{{ parseInt(row.executed_time) }} ms</span>
    </template>

    <template #column_response_code="{ row }">
      <el-tag v-if="row.response_code === 200" type="success" size="small">
        {{ row.response_code }}
      </el-tag>
      <el-tag v-else-if="row.response_code === 500" type="danger" effect="dark" size="small">
        {{ row.response_code }}
      </el-tag>
      <el-tag v-else type="warning" size="small">
        {{ row.response_code }}
      </el-tag>
    </template>

    <template #shower_request_param="{ data }">
      <JsonViewer :value="JSON.parse(data.request_param)" copyable sort theme="jv-light" />
    </template>

    <template #shower_response_content="{ data }">
      <JsonViewer :value="JSON.parse(data.response_content)" copyable sort theme="jv-light" />
    </template>
  </Scaffold>
</template>

<script setup lang="ts">
  import { JsonViewer } from 'vue3-json-viewer'

  import 'vue3-json-viewer/dist/vue3-json-viewer.css'

  defineOptions({
    name: 'OperationLogIndex',
  })

  const entity = 'OperationLog'

  const actions = {
    show: 'system-operation-log-show',
  }
</script>
